<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>付款界面</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>

    function pay() {
        console.log('into pay');
        var ajaxTimeoutTest = $.ajax({
            url:'http://localhost:8080/order/pay',  //请求的URL
            timeout : 5000, //超时时间设置，单位毫秒
            type : 'post',  //请求方式，get或post
            data : {
                id: ${detail.id}
            },  //请求所传参数，json格式
            dataType : 'json',//返回的数据格式
            success : function(data){ //请求成功的回调函数
                console.log('data:', data.msg);
                alert(data.msg + '，跳转到成功页面');
                window.location.href = '/status/success';
            },
            complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数
                if(status=='timeout'){//超时,status还有success,error等值的情况
                    ajaxTimeoutTest.abort();
                    alert("超时，跳转到用户历史账单");
                    window.location.href = '/status/fail';
                }
            }
        });

    };
    </script>
</head>
<body>
    <h1>付款页面</h1>
    <h3>商品标志: ${detail.id}</h3>
    <h3>商品名: ${detail.orderName} </h3>
    <h3>上架时间: ${detail.createTime}</h3>
    <h2>&nbsp;&nbsp;&nbsp;<input value="点击付款" type="button" onclick="pay()"/></h2>

</body>
</html>